<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗登录</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .logWindow{
            width: 250px;
            height: 150px;
            border: 1px solid #000;
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 0;right: 0;top: 0;bottom: 0;
            margin: auto;
            z-index: 1;
            display: none;
            background: #ccc;
        }
        .logWindow .lwTop{
            height: 30px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
            cursor: move;
            user-select: none;
        }
        .logWindow .lwInfo{
            display: flex;
            flex-direction: column;
        }
        .logWindow .lwInfo .logBtn{
            width: 50px;
        }
    </style>
</head>
<body>
    <p>你好，欢迎来到国家安全信息局，请先<a href="#" class="logJump">登录</a></p>

    <section class="logWindow">
        <div class="lwTop">
            <h4>注册登录</h4>
            <button class="closeBtn">x</button>
        </div>
        <div class="lwInfo">
            <div>
                <label for="">用户名：</label><input type="text" class="username"><span></span>
            </div>
            <div>
                <label for="">密码：</label><input type="password" class="password"><span></span>
            </div>
            <div>
                <input type="checkbox" class="logSwitch"><span>同意</span><a href="#">用户协议</a>
            </div>
            <button disabled class="logBtn">登录</button>
        </div>
    </section>


    <script>
        // 按功能需求依次获取属性，即写事件时用到什么再获取
        let logJump = document.querySelector('.logJump');
        let logWindow = document.querySelector('.logWindow');
        let closeBtn = document.querySelector('.closeBtn');
        let logSwitch = document.querySelector('.logSwitch');
        let logBtn = document.querySelector('.logBtn');
        let lwTop = document.querySelector('.lwTop');
        let userName = document.querySelector('.username');
        let passWord = document.querySelector('.password');
        let pShow = document.querySelector('p');

        // 1.显示、关闭登录弹窗
        logJump.onclick = () =>{
            logWindow.style.display = 'block';
        }
        closeBtn.onclick = () =>{
            logWindow.style.display = 'none';
        }

        // 2.是否同意协议
        var isSwitch;       // 协议开关，为登录做准备
        // 点击协议单选框事件
        logSwitch.onclick = () =>{
            // 勾上则把禁用属性取消，并记录协议开关为true
            if(logSwitch.checked){
                logBtn.disabled = false;
                isSwitch = true;
            }else{
                logBtn.disabled = true;
                isSwitch = false;
            }
        }

        // 3.拖拽
        lwTop.onmousedown = e =>{
            // 鼠标按下登陆框头部时，记录鼠标到登陆框的距离
            let ol = e.offsetX;
            let ot = e.offsetY;
            // 滑动登录框
            document.onmousemove = eve =>{
                
                logWindow.style.margin = 0;     // margin由auto改为0避免居中定位设置的影响
                // 鼠标到浏览器窗口的左上距离 - 鼠标到登陆框左上的距离 = 登陆框到浏览器左上的距离
                let ox = eve.clientX - ol;
                let oy = eve.clientY - ot;
                
                // 不然登陆框离开浏览器可视区域设置
                if(ox>window.innerWidth-logWindow.offsetWidth){
                    ox=window.innerWidth-logWindow.offsetWidth;
                }else if(ox<0){
                    ox = 0;
                }
                if(oy>document.documentElement.clientHeight-logWindow.offsetHeight){
                    oy=document.documentElement.clientHeight-logWindow.offsetHeight;
                }else if(oy<0){
                    oy = 0;
                }

                // 设置定位
                logWindow.style.left = ox +'px';
                logWindow.style.top = oy +'px';
            }
        }
        // 松开鼠标时，取消移动事件
        document.onmouseup = function(){
			document.onmousemove = null;
        }
        
        // 4.通过点击和按下esc键关闭弹窗
        closeBtn.onclick = () =>{
            logWindow.style.display = 'none'
        }
        document.onkeydown = e =>{
            // Esc键码值为27
            if(e.keyCode === 27){
                logWindow.style.display = 'none'
            }
        }

        // 5. 正则验证
        let showName;   // 全局变量用于登录成功后显示信息用
        let isUn;       // 用户名验证开关
        userName.onblur = () =>{
            // 获取信息
            let $username = userName.value;
            let unReg = /^[a-z][a-z0-9]{5,11}$/i;       // 正则验证，开头字母并由字母数字组成的6-12位长度的用户名，i为忽略大小写
            let spanTip = userName.nextElementSibling;  // 获取用户名输入框旁边的提示框
            // 通过正则，则提示通过、用户名储存、打开用户名验证开关
            if(unReg.test($username)){
                spanTip.innerHTML = '√';
                showName = $username;
                return isUn = true;
            }else{
                spanTip.innerHTML = 'x';
                return isUn = false;
            }
        }

        let isPw;
        passWord.onblur = () =>{
            // 获取信息
            let $password = passWord.value;
            let pwReg = /^\S{6,18}$/;       // 正则验证，非空字符的6-18位长度的密码
            let spanTip = passWord.nextElementSibling;
            if(pwReg.test($password)){
                spanTip.innerHTML = '√';
                return isPw = true;
            }else{
                spanTip.innerHTML = 'x';
                return isPw = false;
            }
        }

        // 6. 登录
        logBtn.onclick = () =>{

            // 只有协议开关、用户名验证开关、密码开关均为true时才给登录
            if(isSwitch&&isUn&&isPw){
                alert('登录成功');
                // 登录后关闭弹窗，显示登录信息
                logWindow.style.display = 'none';
                pShow.innerHTML = `你好，${showName},欢迎来到国家安全信息局，<a href="#" class="exitBtn">退出</a>`;
            }else{
                alert('请重新填写正确用户名和密码');
            }
        }

        // 7.退出：通过事件监听+事件源给退出动态生成的按钮设置退出事件
        document.addEventListener('click',(e)=>{
            if(e.target.className === 'exitBtn'){
                pShow.innerHTML = `你好，欢迎来到国家安全信息局，请先<a href="#" class="logJump">登录</a>`;
            }
        })

        
        /* 
        
            存在问题：
                * 退出后无法重新登录

        */
    </script>
</body>
</html>